<template>
    <div>
        <h1>父组件</h1>
        <!-- 设置按钮的目的是通过显示与标签的销毁与重建来了解生命周期钩子函数的执行顺序-->
        <button @click="changeShow">销毁与重建</button>
        <ChildVue v-if="show"></ChildVue>
    </div>
</template>

<script lang="ts">
import {
    defineComponent,
    onBeforeMount,
    onMounted,
    onBeforeUpdate,
    onUpdated,
    onBeforeUnmount,
    onUnmounted,
    ref,
} from 'vue'
//引入组件
import ChildVue from './ChildVue.vue'

export default defineComponent({
    components: {
        ChildVue
    },
    setup() {
        //使用ref使得show编程响应式数据
        let show = ref(true);
        //设置函数   事件执行函数(事件执行逻辑)
        function changeShow() {
            console.log(show)
            //因为基本数据类型被ref（）包裹时，数据就变成了ref对象，数据值通过xx.value的形式获得
            show.value = !show.value
        }
        //设置组合api，代替生命周期钩子函数
        onBeforeMount(() => {
            console.log('这是父组件的onBeforeMount')
            console.log(this)//undefined  
        })
        onMounted(() => {
            console.log('这是父组件的onMounted')
            console.log(this)//undefined 
        })
        onBeforeUpdate(() => {
            console.log('这是父组件的onBeforeUpdate')
            console.log(this)//undefined 
        })
        onUpdated(() => {
            console.log('这是父组件的onUpdated')
            console.log(this)//undefined 
        })
        onBeforeUnmount(() => {
            console.log('这是父组件的onBeforeUnmount')
        })
        onUnmounted(() => {
            console.log('这是父组件的onUnmounted')
            console.log(this)//undefined 
        })

        return {
            show,
            changeShow
        }
    },
    data(){
        return{
            msg:'我是data中的数据msg'
        }
    },
    beforeCreate() {
        console.log('这是父组件的beforeCreate')
        console.log(this)//指向组件对象（proxy对象）
        console.log(this.msg)//undefined  访问data中的数据  不能访问到  因为在beforeCreate中，所有的数据都未初始化
        console.log(this.show)//true   访问setUp中的数据  可以访问到  因为setUp函数指向顺序在 beforeCreate之前
        
    },
    created() {
        console.log('这是父组件的created')
        console.log(this.msg)//访问data中的数据  可以访问到
    },
    beforeMount() {
        console.log('这是父组件的beforeMount')
    },
    mounted() {
        console.log('这是父组件的mounted')
    },
    beforeUpdate() {
        console.log("父组件的beforeUpdate");
    },
    updated() {
        console.log("父组件的updated");
    },
    onbeforeUnmount() {
        console.log('这是父组件的beforeUnmount')
    },
    unmounted() {
        console.log('这是父组件的unmounted')
    }

})
/*
    生命周期钩子函数：
        vue2             vue3              
    beforeCreate        beforeCreate
    created             created
    beforeMount         beforeMount
    mounted             mounted
    beforeUpdate        beforeUpdate
    updated             updated
    beforeDestory       beforeUnmount
    destroyed           unmounted

    vue3中的组合api，也就是代替生命周期钩子函数，写在setUp函数中
⭐  setUp函数得执行顺序在beforeCreate之前
        vue2             vue3               组合api 
    beforeCreate        beforeCreate        setUp()
    created             created             setUp()
    beforeMount         beforeMount         onBeforeMount
    mounted             mounted             onMounted
    beforeUpdate        beforeUpdate        onBeforeUpdate
    updated             updated             onUpdated
    beforeDestory       beforeUnmount       onBeforeUnmount
    destroyed           unmounted           onUnmounted


    1、vue3中，生命周期钩子函数书写的两种方式：
        （1）跟vue2的一样，写在配置项中，也就是写在setup函数的下面；  （但是不建议）
        （2）使用组合api代替生命周期构造函数，也就是写在setUp函数中。
    2、在vue3中，使用生命周期钩子函数的父子组件，执行顺序，和在vue2中，的生命周期钩子函数执行顺序一致；
        这是父组件的beforeCreate-->这是父组件的created-->这是父组件的beforeMount-->子组件的beforeCreate-->子组件的created-->子组件的beforeMount-->子组件的mounted-->这是父组件的mounted
    3、在vue3中，使用组合api代替生命周期钩子函数，他的一个执行顺序：
        （只有组合api，没有写生命周期钩子函数的情况）；
        这是父组件的onBeforeMount-->子组件的onBeforeMount-->子组件的onMounted-->这是父组件的onMounted
    4、在有钩子函数和组合api的情况下，看一下执行顺序
        父组件的beforeCreate-->父组件的created-->父组件的onBeforeMout-->父组件的beforeMount-->子组件的beforeCreate-->子组件的created-->子组件的onBeforeMount-->子组件的beforeMount-->子组件的onMounted-->子组件的mounted-->父组件的onMounted-->父组件的mounted
        //总结：父子组件 生命周期的执行顺序与vue2一样，但是 setUp中，代替生命周期钩子函数的组合api 执行顺序要优先同等的 生命周期钩子函数
    5、在子组件销毁与重建之后触发了哪些生命周期。
        子组件销毁时：
                (本质上：父组件发生更改，子组件销毁/卸载。)
                父组件的onBeforeUpdate-->父组件的beforeUpdate-->子组件的onBeforeUnmount-->子组件的beforeUnmount-->子组件的onUnmounted-->子组件的unmounted-->父组件的onUpdated-->父组件的updated
        子组件重建时：
                (本质上：父组件发生改变，子组件重新挂载了一遍。)
                父组件的onBeforeUpdate-->父组件的beforeupdate-->子组件的beforeCreate-->子组件的created-->子组件的onBeforeMount-->子组件的beforeMount-->子组件的onMounted-->子组件的mounted-->父组件的onUpdated-->父组件的updated
    6、this指向：在生命周期钩子函数、setUp函数的组合api中，this指向
        (1)生命周期钩子函数的this指向组件对象(proxy对象),setUp函数中暴露出来的数据与data中的数据，都可以访问的到。（注意遵守生命周期规律）
        (2)在组合api中，this没有指向组件对象，是undefined，也就是说它不能通过this访问data、computed、methods....
    7、两个点：
        (1) setup在beforeCreate之前执行，组件对象还没有创建，this是undefined，不能通过this访问data/computed/methods...
        (2)setup返回值中的属性会同data中的属性合并成为组件对象上的属性
                    它中的方法会同methods中的方法合并成为组件对象上的方法

*/
</script>

<style scoped>

</style>